<template>
   <div>
        <div class="bai">
          <el-form ref="form"  :rules="rules" :model="form" label-width="80px">
            <el-form-item label="选择医师">
               <el-select  v-model="form.region" placeholder="请选择活动区域">
                <el-option v-for="x,i in data" :key="i" :value="x.dname">{{x.dname}}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期">
              <el-calendar @click.native="opopop" v-model="form.elcalendar">
            </el-calendar>

            </el-form-item>
            <div class="xian_nie">
              <el-tag  v-for="x,i in pdd" :key="i" type="success" @close="handleClose(x)" closable>{{x}}</el-tag>
            </div>
           

            

           
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>
</template>

<script>
export default {
        data() {
          return {
            data:[],
            chun:[],
            pdd:[],
            
            form: {
              region: '',
              elcalendar:'',
              input: '',
            },
            rules:{
                region:[
                        { required: true, message: '请选择', trigger: 'blur' },
                      ],
            }
            
          }
        },
        mounted(){
          this.getData()
        },
        methods: {
         
          getData() {
            let url = `/users/doctor`;
            this.axios.get(url).then((res) => {
              this.data = res.data.data;
            });
          },
          handleClose(x){
            this.chun.splice(this.chun.indexOf(x), 1);
            this.pdd.splice(this.pdd.indexOf(x), 1);            
          },
          opopop(){
              if(!this.form.elcalendar==''){
                this.chun.push(this.$moment(this.form.elcalendar).format('MM-DD'))
              }
              var seton = new Set(this.chun)
              this.pdd = [...seton].sort()
          },
        onSubmit() {
        this.$confirm('提交医师排班, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.chun.forEach(res=>{
          let url = `/doctor_state`;
          let a = `sname=${this.form.region}&stime=${res}`
           this.axios.post(url,a).then((res) => {
              console.log(res);
              if(res.data.code==200){
                this.pdd=''
                this.form.region=''
              }
            })
              })
            console.log(this.chun);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

           
          },
         
        }
}
</script>

<style lang="scss" scoped>
.bai{
  background-color: #fff;
  height: calc(100vh - 100px);
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
    box-shadow:0px 0px 10px #ccc;
     border-radius: 7px;
  .el-tag.el-tag--success{
    margin: 0 0 10px 20px;
  }
  .xian_nie{
    width: 1165px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 78px;
    margin-top: -21px

  }
  .el-form{
    padding: 20px;
    .is-selected {
      color: #1989FA;
    }
  }


}
::v-beep .el-calendar__body{
      padding: 12px 20px 5px;
}
.el-button{
  margin-left: 16px;
}
</style>



       